<template>
  <div style="padding-bottom: 10px">
    <div style="background: white;padding-bottom: 0px;padding-top: 0px">
      <product-feature-list :features="features" :description="description"></product-feature-list>
    </div>
    <swiper id="test" :list="banner" :auto="true" style="width:100%;margin:0 auto;" :aspect-ratio="250/800"
            dots-position="center"></swiper>
    <deposit-item style="margin-top: 10px"
                  :title="intelligentDepositProduct.title" :newProduct="true"
                  :productList="intelligentDepositProduct.productList">
    </deposit-item>
    <deposit-item style="margin-top: 10px"
                  :title="certificateOfDepositProduct.title" :newProduct='certificateOfDepositProduct.isNew'
                  :productList="certificateOfDepositProduct.productList">
    </deposit-item>
    <deposit-item style="margin-top: 10px"
                  :title="fixedTermDepositProduct.title" :newProduct='fixedTermDepositProduct.isNew'
                  :productList="fixedTermDepositProduct.productList">
    </deposit-item>
  </div>
</template>

<script>
  import { Swiper, XHeader } from 'vux'
  import Icon1Url from '@/assets/image/icon_bank_shell.svg'
  import Icon2Url from '@/assets/image/icon_bank_profit.svg'
  import Icon3Url from '@/assets/image/icon_bank_phone.svg'
  import ProductFeatureList from '@/components/ProductFeatureList'
  import DepositItem from '@/page/deposit/components/DepositItem'

  export default {
    name: 'DepositIndex',
    components: {
      XHeader,
      Swiper,
      ProductFeatureList,
      DepositItem
    },
    data () {
      return {
        features: [
          {'icon': Icon1Url, 'feature': '安全', 'subTitle': '银行牌照'},
          {'icon': Icon2Url, 'feature': '收益', 'subTitle': '最高4.875%'},
          {'icon': Icon3Url, 'feature': '便捷', 'subTitle': '随时支付'}
        ],
        description: '微众银行存款受央行银保监会监管，采取较央行基准利率上浮的定价策略，为客户提供更丰富的存款产品，更便捷的线上金融服务。',
        viewMoreUrl: '/',
        banner: [{
          url: '/depositIndex',
          img: 'http://pic.soutu123.com/back_pic/18/09/18/0ca02eb9c35f095481196354a1f455c8.jpg!/fw/700/quality/90/unsharp/true/compress/true',
          title: '理财好产品'
        }, {
          url: 'javascript:',
          img: 'http://pic.soutu123.com/back_pic/18/09/20/e408e91a0fb92de6c2e573820536f7f3.jpg!/fw/700/quality/90/unsharp/true/compress/true',
          title: '收益高又高'
        }],
        intelligentDepositProduct: {
          title: '智能存款+',
          isNew: true,
          productList: [
            {
              type: 0,
              rateRange: '2.80%~4.50%',
              rateStr: '年利率',
              feature: '存满一个月，可达4%',
              features: ['当日起息', '支取不限额', '实时到账']
            }
          ]
        },
        certificateOfDepositProduct: {
          title: '大额存单',
          isNew: false,
          productList: [
            {type: 1, rateRange: '4.262%', rateStr: '年利率', feature: '安新存，灵活取', features: ['月月取息', '20万元起存', '3年期']}
          ]
        },
        fixedTermDepositProduct: {
          title: '定期存款',
          isNew: false,
          productList: [
            {type: 2, rateRange: '1.32%~4.875%', rateStr: '年利率', feature: '存款利率有惊喜', features: ['约定存期', '50元起存']}
          ]
        }
      }
    },
    created () {
      this.$store.commit('setTitle', '银行存款')
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
